<template>
  <div class="home_cell statusBar second2">
    <van-swipe class="my-swipe" indicator-color="white" width="100%">
      <van-swipe-item>
        <section class="devInfo">
          <ul class="infoList">
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number">{{ parseInt(data2[0]/60)}}</span>
                  <span class="unit">{{ $t("translate59") }}</span>
                  <span class="number">{{ parseInt(data2[0]%60)}}</span>
                  <span class="unit">{{ $t("minute") }}</span>
                </p>
                <p class="infoName" @click="handlClick(1)">
                  {{ $t("translate63") }}
                  <!-- <img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" /> -->
                </p>
              </div>
            </li>
            <div class="infoLine"></div>
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number">{{ data2[1] }}</span>
                  <span class="unit">{{ $t("translate61") }}</span>
                </p>
                <p class="infoName">{{ $t("translate64") }}
                  <!-- <img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" /> --></p>
              </div>
            </li>
            <div class="infoLine"></div>
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number">{{ data2[2] }}</span>
                  <span class="unit">{{ $t("translate11") }}</span>
                </p>
                <p class="infoName" @click="handlClick(2)">
                  {{ $t("translate66")}}
                  <!-- <img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" /> -->
                </p>
              </div>
            </li>
          </ul>
        </section>
      </van-swipe-item>
      <van-swipe-item>
        <section class="devInfo">
          <ul class="infoList">
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number">{{ data2[3] }}</span>
                  <span class="unit">{{ $t("translate11") }}</span>
                </p>
                <p class="infoName" @click="handlClick(3)">
                  {{ $t("translate74")}}
                  <!-- <img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" /> -->
                </p>
              </div>
            </li>
            <div class="infoLine"></div>
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number">{{ data2[4] }}</span>
                  <span class="unit">{{ $t("translate62") }}</span>
                </p>
                <p class="infoName" @click="handlClick(4)">
                  {{ $t("translate76")}}
                  <!-- <img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" /> -->
                </p>
              </div>
            </li>
            
          </ul>
        </section>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
  <script>
import { mapGetters, mapState } from "vuex";
import { generateWifiPromise } from "@/util/index.js";
export default {
  name: "HomeStatus",
  props: {
    data2:{
      type:Array,
      default:[1,2,3,4,5],
    }
  },
  computed: {
    ...mapState(["devImg", "logo", "devId"]),
    ...mapGetters(["imgPath"]),
    ...mapState({
      lbedCondition: (state) => state.bedCondition.lbedCondition,
      rbedCondition: (state) => state.bedCondition.rbedCondition,
      lheartRate: (state) => state.bedCondition.lheartRate,
      lrespiratoryRate: (state) => state.bedCondition.lrespiratoryRate,
      rheartRate: (state) => state.bedCondition.rheartRate,
      rrespiratoryRate: (state) => state.bedCondition.rrespiratoryRate,
    }),

    sitPostureName() {
      switch (this.sitPosture) {
        case 0:
          return this.$t("enum1");
        case 1:
          return this.$t("enum2");
        case 2:
          return this.$t("enum3");
        case 3:
          return this.$t("enum4");
        case 4:
          return this.$t("enum5");
      }
    },
    date() {
      let date = new Date();
      let obj = {};
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      obj.startTime = JSON.stringify(
        new Date(year + "/" + month + "/" + day + " 00:00:00").getTime()
      ).substring(0, 10);
      obj.endTime = JSON.stringify(
        new Date(year + "/" + month + "/" + day + " 23:59:59").getTime()
      ).substring(0, 10);
      return obj;
    },

    icon() {
      console.log("this.imgPath", this.imgPath);
      return require(`../assets/${this.imgPath}ic_right.png`);
    },
  },
  data() {
    return {
      sitPostureChangeCountThis: 0,
      seatedCountThis: 0,
      eventTime2This: 0,
      countSet: 0
    }
  },
  watch: {
    // devId: {
    //   handler(newVal, oldVal) {
    //     this.getData()
    //   },
    // },
    // seatedCount: {
    //   handler(newVal, oldVal) {
    //     this.getData()
    //   },
    // },
    // sitPostureChangeCount: {
    //   handler(newVal, oldVal) {
    //     this.getData()
    //   },
    // },
    // eventTime: {
    //   handler(newVal, oldVal) {
    //     this.getData()
    //   },
    // }

  },
  mounted() {

    // this.getData()


  },
  methods: {
    getData() {
      axios({
        method: 'get',
        url: '/api?mac=C10012400126&endTime='+this.endTime,
      }).then((response) => {
        console.log(12222)
        console.log(response.data.data)
        let state=response.data.data.result_left.state;
        this.data.yData[0].value = state.deepSleep != "" ? parseInt(state.deepSleep/state.sleepTime*100) : 0
        this.data.yData[1].value = state.lightSleep != "" ? parseInt(state.lightSleep/state.sleepTime*100) : 0
        this.data.yData[2].value = state.sober != "" ? parseInt(state.sober/state.sleepTime*100) : 0
        this.data.yData[3].value = state.outBed != "" ? parseInt(state.outBed/state.sleepTime*100): 0
        this.sleepTime=state.sleepTime
        console.log( this.data.yData)
        this.$refs.charBar.draw();
      });
    },

    handlClick(i) {
      // switch (i) {
      //   case 1:
      //     this.$router.push("/versionInfo");
      //     break;
      //   case 2:
      //     this.$router.push("/Posture");
      //     break;
      //   case 3:
      //     this.$router.push("/SetPosture");
      //     break;
      //   case 4:
      //     this.$router.push("/WaistPosture");
      //     break;
      // }
    },
  },

};
</script>
  
  <style lang='less' scoped>
.second2 {
  width: calc(100% - 2.4rem);
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.9);
  background-color: #fff;
  border-radius: 1.6rem;
  opacity: 1;
  position: relative;
  height: 10.4rem;
  margin-bottom: 1.2rem;
  border-radius: 1.6rem;
}

.van-swipe {
  width: 100%;
  height: 8.8rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 8.8rem;
  text-align: center;
  // background-color: #39a9ed;
}

/deep/.van-swipe__indicators {
  bottom: 0 !important;
}

/deep/i.van-swipe__indicator.van-swipe__indicator--active {
  width: 1.2rem;
  height: 0.6rem;
  border-radius: 2.5rem;
  background-color: var(--xwq_color) !important;
}

/deep/.van-swipe__indicator {
  background: #6c6363;
  bottom: 0.8rem;
}

// .van-swipe__indicator{
// width: 1rem;
// height: 0.6rem;
// border-radius: 35%;
// }
.dark {
  .home_cell {
    background: #303030;
    color: rgba(255, 255, 255, 0.86);

    .dev {
      color: #ffff F;
    }
  }
}

.devInfo {
  // width: 100%;
  // margin-top:1.2rem;
  // height: 8.8rem;
  // border-radius: 1.6rem;
  // background: white;
  // position: relative;
}

.dark .devInfo {
  background: #303030;
}

.devInfo .infoList {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  display: flex;
  text-align: center;
}

.devInfo .infoList .infoItem {
  width: calc(((100% - 0.6rem) / 3));
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.devInfo .infoList .infoItem .infoWrap {
  padding: 0 0.4rem;
  width: 100%;
}

.devInfo .infoList .infoItem .infoWrap .infoNum {
  align-self: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0;
}

.devInfo .infoList .infoItem .infoWrap .infoNum .number {
  font-size: 2.4rem;
  padding-right: 0.2rem;
  color: rgba(0, 0, 0, 0.9);
}

.dark .devInfo .infoList .infoItem .infoWrap .infoNum .number {
  color: rgba(255, 255, 255, 0.86);
}

.devInfo .infoList .infoItem .infoWrap .infoNum .unit {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6);
}

.dark .devInfo .infoList .infoItem .infoWrap .infoNum .unit {
  color: rgba(255, 255, 255, 0.6);
}

.devInfo .infoList .infoItem .infoWrap .infoName {
  margin-top: 0.2rem;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark .devInfo .infoList .infoItem .infoWrap .infoName {
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.devInfo .infoList .infoLine {
  width: 0.1rem;
  height: 3.2rem;
  align-self: center;
  background: rgba(0, 0, 0, 0.2);
  // transform: scaleX(0.25);
}

.dark .infoList .infoLine {
  background: rgba(255, 255, 255, 0.2);
}

.devInfo .infoList .line:last-child {
  border-right: none;
}
</style>
  